<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>日历</title>
	<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/style.css">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="calendar">
		<div class="top">
			<div class="YM"><span class="left" @click="prevM">&lt;</span><p>{{year}}-{{month}}<span class="back" @click="backDay">今</span></p><span class="right"  @click="nextM">&gt;</span></div>
			<div class="weeks">
				<div class="week" v-for="(item,index) in weeks" :key="index">{{item}}</div>
			</div>
		</div>
		<div class="body">
			<div class="prev" v-for="(item,index) in prev">{{item}}</div>
			<div class="current" v-for="(item,index) in current" :class="isDay===index?'active':''">{{item}}</div>
			<div class="next" v-for="(item,index) in next">{{item}}</div>
		</div>
	</div>
	<script>
        new Vue({
            el:'#calendar',
            data(){
            	return{
            		prev:[],
            		current:[],
            		next:[],
            		year:'',
            		month:'',
            		weeks:['日','一','二','三','四','五','六'],
            		isDay:''
            	}
            },
            mounted(){
            	this.currentInfo()
            	this.currentDay()
            },
            methods:{
            	currentInfo(year,month){
            		let date=new Date()
            		this.year=year||date.getFullYear()//当年
            		this.month=month||date.getMonth()+1//当月
            		let currentDate=new Date(this.year,this.month,0)//当月最后一天
            		let currentArr=[...Array(currentDate.getDate()).fill(1)]//创建当月数组，填充1
            		this.current=currentArr.map((item,index)=>item+index)//做数组处理
            		/*上月*/
            		let prevDate=new Date(this.year,this.month-1,0)//上月最后一天
            		let prevArr=[...Array(prevDate.getDay()+1).fill(prevDate.getDate())]//创建上月数组，填充最后一天
            		this.prev=prevArr.map((item,index)=>item-index).sort((a,b)=>a-b)//做数组处理
            		/*下月*/
            		let nextArr=[...Array(6-currentDate.getDay()).fill(1)]//创建下月数组，填充1
            		this.next=nextArr.map((item,index)=>item+index)
            	},
            	prevM(){
            		let year,month
            		if(this.month!==1){
            			month=--this.month
            			year=this.year
            		}else{
            			month=12
            			year=--this.year
            		}   
            		this.currentDay()
            		this.currentInfo(year,month)
            	},
            	nextM(){
            		let year,month
            		if(this.month<12){
            			month=++this.month
            			year=this.year
            		}else{
            			month=1
            			year=++this.year
            		} 
            		this.currentDay()
            		this.currentInfo(year,month)
            	},
            	currentDay(){
            		let date=new Date()            		
            		if(this.year===date.getFullYear()&&this.month===date.getMonth()+1){
            			this.isDay=date.getDate()-1
            		}else{
            			this.isDay=''
            		}
            	},
            	backDay(){           		
            		this.currentInfo()
                        this.currentDay()
            	}
            }
        })
    </script>
</body>
</html>